<template>
    <!--用户信息-->
    <div class="content_panel project_modules">
        <div class="content_panel_top">
            <h3 class="panel_title">
                <span>{{$t('pageTitle.userInformation')}}</span>
            </h3>
            <el-form ref="form" :model="form" :rules="rules" :inline="false" class="module_form">
                <el-row>
                    <el-col :span="4">
                        <el-form-item prop="phone" label="">
                            <el-input v-model="form.phone" :placeholder="$t('common.mobileNumber')" clearable></el-input><!--手机号码-->
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="marketChannel" label="">
                            <el-input v-model="form.marketChannel" :placeholder="$t('common.applicationMarket')" clearable></el-input><!--应用市场-->
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="source" label="">
                            <el-input v-model="form.source" :placeholder="$t('common.registrationChannel')" clearable></el-input><!--注册渠道-->
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="appName" label="">
                            <select-app-list v-model="form.appName" :placeholder="$t('system.appName')"></select-app-list><!--app名称-->
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="appVersion" label="">
                            <el-input v-model="form.appVersion" :placeholder="$t('common.versionName')" clearable></el-input><!--版本号-->
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="appPackage" label="">
                            <el-input v-model="form.appPackage" :placeholder="$t('system.appPackage')" clearable></el-input><!--app包名-->
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item prop="applyTime" label=""><!--注册时间-->
                            <el-date-picker
                                style="width:100%"
                                v-model="form.registerTime"
                                type="datetimerange"
                                format="yyyy-MM-dd HH:mm:ss"
                                value-format="timestamp"
                                :editable="false"
                                range-separator="-"
                                :default-time="['00:00:00', '23:59:59']"
                                :start-placeholder="$t('audit.registerStartTime')"
                                :end-placeholder="$t('audit.registerEndTime')"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-button @click="search" type="primary">{{ $t('common.search') }}</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <div class="module_content">
            <div class="content_panel project_modules">
                <div class="table_list">
                    <el-table :data="tableData" :max-height="tableMaxHeight" style="width: 100%">
                        <el-table-column align="left" label="UserID" prop="id" min-width="120"></el-table-column>
                        <el-table-column align="left" :label="$t('common.name')" prop="realName" min-width="160"></el-table-column><!--姓名-->
                        <el-table-column align="left" prop="phone" :label="$t('common.mobileNumber')" min-width="130"><!--手机号码-->
                            <template slot-scope="{ row }">
                                <a @click="goDetail(row.id)" type="text" size="small" href="javascript:void(0);">{{ row.phone }}</a>
                            </template>
                        </el-table-column>
                        <el-table-column align="left" :label="$t('common.applicationMarket')" prop="marketChannel" min-width="130"></el-table-column><!--应用市场-->
                        <el-table-column align="left" :label="$t('common.registrationChannel')" prop="source" min-width="120"></el-table-column><!--注册渠道-->
                        <el-table-column align="left" :label="$t('system.appName')" prop="appName" min-width="160"></el-table-column><!--APP名称-->
                        <el-table-column align="left" :label="$t('common.versionName')" prop="appVersion" min-width="120"></el-table-column><!--版本号-->
                        <el-table-column align="left" :label="$t('system.appPackage')" prop="appPackage" min-width="160"></el-table-column><!--APP包名-->
                        <el-table-column align="left" :label="$t('common.createTime')" min-width="160"> <!--注册时间-->
                            <template slot-scope="scope">{{ scope.row.createTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template>
                        </el-table-column>
                        <el-table-column align="left" prop="borrowTimes" :label="$t('common.historyBorrowTimes')" min-width="120"></el-table-column><!--历史借款次数-->
                        <el-table-column align="left" prop="levelName" :label="$t('operation.userLevel')" min-width="100"></el-table-column><!--用户等级-->
                        <el-table-column align="left" prop="isBorrowing" :label="$t('common.isInBorrowing')" min-width="120"><!--是否处于借款中-->
                            <template slot-scope="scope">{{ scope.row.isBorrowing === '1' ? $t('common.inBorrowing') : $t('common.unBorrow') }}</template>
                        </el-table-column>
                    </el-table>
                </div>
                <!--分页组件-->
                <pagination @pageChange="pageChange" :page="page"><!--分页组件--></pagination>
            </div>
        </div>
    </div>
</template>

<script>
    import mixin from '@/service/mixin';
    import Pagination from '@/components/pagination';
    import SelectAppList from '@/components/select-app-list';

    export default {
        name: 'audit-userManagement-users',
        components: {
            Pagination,
            SelectAppList
        },
        mixins: [mixin],
        data() {
            return {
                form: {
                    phone: '',
                    registerTime: [],
                    startDate: '', // 根据注册时间查询开始日期
                    endDate: '', // 根据注册时间查询结束日期
                    marketChannel: '',
                    source: '',
                    appName: '',
                    appVersion: '',
                    appPackage: ''
                },
                rules: {
                    phone: [
                        { pattern: /^\d+$/, message: this.$t('verify.plsInputNumber') },
                    ]
                },
                tableData: [],
            };
        },
        methods: {
            // 搜索列表数据
            search() {
                this.$refs.form.validate(val => {
                    if (val) {
                        this.page.currentPage = 1;
                        this.getTableData();
                    }
                });
            },
            // 获取列表数据
            getTableData(page = this.page) {
                const form = this.form;
                const params = {
                    phone: form.phone,
                    marketChannel: form.marketChannel,
                    source: form.source,
                    appName: form.appName,
                    appVersion: form.appVersion,
                    appPackage: form.appPackage,
                    startDate: '',
                    endDate: '',
                    page: {
                        pageNo: page.currentPage,
                        pageSize: this.page.pageSize
                    }
                };
                if (form.registerTime && form.registerTime.length) {
                    params.startDate = form.registerTime[0];
                    params.endDate = form.registerTime[1];
                }
                this.$api.customer.list(params).then(res => {
                    const {status, data, error} = res;
                    if ('1' === status && '00000000' === error && data) {
                        this.tableData = data.resultData;
                        this.setPage(data.page, this.page);
                    }
                    this.tableMaxHeight = document.body.clientHeight - 270;
                });
            },
            goDetail(id) {
                this.$storage.set('userId', id);
                this.$openNewBlank(`#/conf/audit/user-management/details/${id}`);
            },
        },
        created() {
            this.getTableData();
        },
    };
</script>

<style lang="scss">
    [data-page=audit-userManagement-users] {
        .el-col {
            padding-left: 10px;
        }
        .el-table .cell, .el-table th > .cell {
            word-break: keep-all;
            word-wrap: break-word;
        }
        .el-tooltip__popper {
            max-width: 300px;
            word-break: break-all;
            background-color: #fff;
            box-shadow: 0px 0px 5px #ccc;
            color: #000;
        }
        .el-date-editor .el-range-separator {
            width: 35px;
        }
    }
</style>
